extends ../_layout
block content
   div.container
      h1= message
      div.jumbotron
         div.media
            div.pull-left
               //a(href='#')
               if(profile_detail && profile_detail.avatar && profile_detail.avatar.bin)
                  img.media-object#imgPreview(src='data:image/jpeg;base64,' + profile_detail.avatar.bin, alt='User Profile Photo', width='200', height='200')
               else
                  img.media-object#imgPreview(src='/img/profile-default.jpg', alt='User Profile Photo', width='200', height='200')

               if(user && user._id.toString() == profile._id.toString())
                  form(method='post', enctype='multipart/form-data')
                     input(type='hidden', name='_csrf', value='#{csrf}')
                     input(type="file", name = "myFile", accept="image/jpeg,image/tiff,image/gif,image/png", onchange="readURL(this)") 
                     input#saveImage(type="submit", value="Save", hidden='true')

            div.media-body
               h4.media-heading= profile.firstname + ' ' + profile.lastname + ' '
                  if(user && profile._id.toString() == user._id.toString())
                     a(href='/users/profile/edit/' + profile._id) Edit
               table.table
                  tr
                     td= 'First name'
                     td= profile.firstname
                  tr
                     td= 'Last name'
                     td= profile.lastname
                  tr
                     td= 'Email'
                     td= profile.local.email
 
      if(user && !user.club && profile._id.toString() == user._id.toString() && user.role && (user.role =='admin' || user.role =='manager') )
         div.well
            a.btn.btn-default(href='/clubs/create') Create a Club

      hr



   script.
      function readURL(input){
         if (input.files[0].size > 1000000) {
            alert("Image file size needs to be smaller than 1 MB.");
            $('#saveImage').hide();
            return;
         }
         if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
               $('#imgPreview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
            $('#saveImage').show();
         }
      }
